<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>结算</title>
    <script src="/static/index/js/vue.js"></script>
    <script src="/static/index/js/moment.min.js"></script>
    <script src="/static/antd/dist/antd.js"></script>
    <link rel="stylesheet" href="/static/antd/dist/antd.css">
    <script src="/static/antd/dist/jquery.js"></script>
    <link rel="stylesheet" href="/static/antd/dist/myLogos.css">
    <link rel="stylesheet" href="/static/antd/dist/footer/style.css">
    <link rel="stylesheet" href="/static/antd/dist/footer/bootstrap.css">
    <style>
        .top-3 > span {
            font-size: 13px;
            color: gray;
            margin-left: 10px;
        }
    </style>

</head>

<body>

<div id="app" style="min-width: 1332px;">
    <!-- 顶部 -->
    <div style="position: fixed; width: 100%; z-index: 999;top: 0;">
        <a-collapse>
            <a-collapse-panel style="font-size: 2rem; text-align: center" key="1"
                              th:header="${session.loginUser==null?'请登录':session.loginUser.nickname}">
                <a style="padding-left: 25px; color: cadetblue;" href="http://auth.shushan.com/login.html"
                   th:if="${session.loginUser==null}">登录</a>
                <div style="width: 50%; margin: 25px auto">
                    <a-button @click="index" type="primary" style="width: 100%;">
                        主页
                    </a-button>
                </div>
                <div style="width: 50%; margin: 0 auto">
                    <a-input-search
                            v-model="keywordInput"
                            placeholder="请输入关键字"
                            enter-button="搜索"
                            size="large"
                            @search="onSearch"></a-input-search>
                </div>
                <br/>
                {{keywordInput}}
            </a-collapse-panel>
        </a-collapse>
    </div>

    <!-- 中间信息 -->
    <div style="margin: 100px auto 0 auto; width: 80%;">
        <a-card hoverable>
            <div class="section">
                <!--收货人信息-->
                <div class="top-2" style="display: flex;justify-content: space-between;">
                    <span style="font-size: 2rem; font-weight: bold;">收货人信息</span>
<!--                    <span>新增收货地址</span>-->
                    <span style="color: red" th:if="${msg!=null}" th:text="${msg}"></span>
                </div>

                <!--地址-->
                <div class="top-3 addr-item" style="width: 600px;
                        height: 50px;
                        display: flex;
                        align-items: center;
                        margin-left: 50px;" th:each="addr : ${orderConfirmData.address}">
                    <p style="  width: 135px;
                            height: 27px;
                            border: 2px solid red;
                            line-height: 27px;
                            font-size: 12px;
                            text-align: center;
                            color: dimgray;"
                       th:attr="def=${addr.defaultStatus}, addrId=${addr.id}" th:text="${addr.name}"></p>
                    <span th:text="${addr.name}"></span>
                    <span th:text="${addr.province}"></span>
                    <span th:text="${addr.city}"></span>
                    <span th:text="${addr.region}"></span>
                    <span th:text="${addr.detailAddress}"></span>
                    <span th:text="${addr.phone}"></span>
                </div>
                <div class="hh1"></div>
            </div>

        </a-card>
        <a-card hoverable style="height: 600px; overflow-y: auto;">
            <div class="to_right">
                <h5>书山</h5></div>
            <div>
                <a-row :gutter="[16,16]">
                    <a-col :span="6" th:each="item : ${orderConfirmData.items}">
                        <a-card hoverable style="width: 260px; margin: 12px auto;">
                            <a>
                                <img
                                        slot="cover"
                                        alt="example"
                                        th:src="${item.image ==''?'https://res.vmallres.com/pimages//product/6941487225057/group//800_800_2909554823F12241C32B51454914908AC346E2F9A54FAB83.png':item.image}"
                                        style="width: 100%;"
                                />
                            </a>
                            <a-popover title="信息">
                                <template slot="content">
                                    <span th:text="${item.title}"></span>
                                </template>
                                <a-button
                                        style="float: right;
                                margin-top: 10px;
                                border-color: cadetblue;
                                color: rgb(224, 42, 42);
                                width: 82px;
                                display: block;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;">
<!--                                    <b style="color: #e02a2a" th:utext="${param.keyword}">-->

<!--                                    </b>-->
                                </a-button>
                            </a-popover>
                            <p>
                                <span style="color: red;" th:text="'￥ '+${#numbers.formatDecimal(item.price, 1,2)}"> ￥ 149.00</span>
                                <span th:text="'x'+${item.count}"> x1 </span><br/>
                                <span th:text="${orderConfirmData.stocks[item.skuId] ? '有货' : '无货'}">有货</span>
                                <span>0.095kg</span>
                            </p>
                        </a-card>
                    </a-col>
                </a-row>
                <!--<div class="yun1" th:each="item : ${orderConfirmData.items}">
                    <img style="width: 90px; height: 90px;" th:src="${item.image}" class="yun" th:title="${item.title}" alt="图片丢失"/>
                    <div class="mi">
                        <p th:text="${item.title}">小米（MI）小米手环2 智能运动 心率检测 来</p>
                        <p>
                            <span style="color: red;" th:text="'￥ '+${#numbers.formatDecimal(item.price, 1,2)}"> ￥ 149.00</span>
                            <span th:text="'x'+${item.count}"> x1 </span>
                            <span th:text="${orderConfirmData.stocks[item.skuId] ? '有货' : '无货'}">有货</span>
                            <span>0.095kg</span>
                        </p>
                    </div>
                </div>-->
            </div>
        </a-card>
        <a-card hoverable>
            <div class="yfze">
                <p class="yfze_a">
                    <span class="z">应付总额：</span>
                    <span class="hq">
                        <b id="payPriceEle"
                           style="color: red;"
                            th:text="'￥ '+${#numbers.formatDecimal(orderConfirmData.payPrice, 1,2)}">￥28.90
                        </b>
                    </span>
                </p>
                <p class="yfze_b">
                    寄送至：<span id="receiveAddressEle"></span>
                    <br/>
                     收货人：<span id="receiverEle"></span>
                </p>
            </div>
            <form action="http://order.shushan.com/submitOrder" method="post">
                <input type="hidden" name="addrId" id="addrIdInput">
                <input type="hidden" name="payPrice" id="payPriceInput">
                <input name="orderToken" th:value="${orderConfirmData.orderToken}" type="hidden"/>
                <button style="width: 100%;
                        background: #fff;
                        border: none;
                        box-shadow: 0 0 0 1px #ff0606;
                        height: 35px;" class="tijiao" type="submit">提交订单</button>
            </form>
        </a-card>
    </div>

    <!-- 底部 -->
    <div class="mkl_footer"
         style="background-image: url('https://img.zcool.cn/community/01431c598be9d60000002129c119f6.jpg@1280w_1l_2o_100sh.jpg')">
        <div class="sub-footer" style="background: rgba(8 ,10 ,12, 0.8);">
            <div class="container">
                <div class="mkls_footer_grid">
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>地址:</h4>
                        <p>贵州省贵阳市清镇市,
                            <br> 云岭东路</p>
                    </div>
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>联系</h4>
                        <p>
                            <span>电话 : </span>182 xxxx 8687</p>
                        <p>
                            <span>邮箱 : </span>
                            <a href="#" style="color: #1890ff;">m182xxxx8687@163.com</a>
                        </p>
                    </div>
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>营业时间:</h4>
                        <p>全天候</p>
                        <p>每周五维护
                            <span>(数据服务)</span>
                        </p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <div class="footer-copy-right">
            <div class="container">
                <div class="allah-copy">
                    <p>Copyright &copy; 2021.书山 <a href="http://shushan.com" target="_blank"></a></p>
                </div>
                <div class="footercopy-social">
                    <ul>
                        <li>
                            <a href="#">
                                <span class="fa fa-facebook"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-twitter"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-rss"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-vk"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <!-- 底部锚点 -->
    <div>
        <a-back-top></a-back-top>
    </div>
    <!-- 返回主页按钮 -->
    <div style="position:fixed; top: 50px; right: 5px;z-index: 999;">
        <a-affix :offset-top="top">
            <a-button th:href="'http://shushan.com'" type="primary">
                返回主页
            </a-button>
        </a-affix>
    </div>

    <div style="position: fixed;
                top: 50px;
                right: -3px;">
        <a-affix :offset-top="top" style="margin-right: 100px;">
            <a-button th:href="'http://cart.shushan.com/cart.html'" type="primary">
                返回购物车
            </a-button>
        </a-affix>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                /*current: ['mail'],
                openKeys: ['sub1'],*/
                keywordInput: "",
                top: 50,

            };
        },
        methods: {
            onSearch() {
                // window.location.href="http://search.shushan.com/list.html?keyword="+keyword;
                location.href = "http://search.shushan.com/list.html?keyword=" + this.keywordInput
                // console.log('搜索值',value);
            },
            index() {
                location.href = "http://shushan.com"
            },
        },
        watch: {
            /*openKeys(val) {
                console.log('openKeys', val);
            },*/
        },
    });

    $(document).ready(function () {
        highlight();
        getFare($(".addr-item p[def='1']").attr("addrId"));
    })

    // 高亮收货人昵称
    function highlight() {
        $(".addr-item p").css({"border": "2px solid gray"});
        $(".addr-item p[def='1']").css({"border": "2px solid red"});
    }
    $(".addr-item p").click(function () {
        $(".addr-item p").attr("def", "0");
        $(this).attr("def", "1");
        highlight();
        // 获取当前的地址id
        // console.log($(this).attr("addrId"))
        var addrId = $(this).attr("addrId")
        getFare(addrId);
    })

    function getFare(addrId) {
        // 给表单回填选择的地址
        $("#addrIdInput").val(addrId);
        // 发送ajax请求
        $.get("http://shushan.com/api/ware/wareinfo/fare?addrId=" + addrId, function (res) {
            console.log("DATA", res);
            $("#fareEle").text(res.data.fare);
            var total = [[${orderConfirmData.total}]];
            // console.log( total*1 + data.data.fare*1)
            var payPrice = total * 1 + res.data.fare * 1
            $("#payPriceEle").text(payPrice);
            $("#payPriceInput").val(payPrice);

            // 设置收货人信息
            const {province, city, region, detailAddress} = res.data.address;
            const {name, phone} = res.data.address;
            $("#receiveAddressEle").text(province + " " + city + " " + region + " " + detailAddress);
            $("#receiverEle").text(name + " " + phone);
        });
    }

</script>
</body>
</html>